<template>
	<div class="common_tabs_container">
		<el-tabs type="card" class="custom_top" v-model="activeName">
			<el-tab-pane label="待审核" name="1"></el-tab-pane>
			<el-tab-pane label="已审核" name="2"></el-tab-pane>
		</el-tabs>
		<sw-common-frame :loading="loading">
			<el-table slot="table" size="medium" :data="taskPageList" height="100%">
				<el-table-column label="序号" type="index" width="48" align="center"></el-table-column>
				<template v-if="activeName === '2'">
					<el-table-column label="审核状态" width="80" :formatter="returnAuditStatus" />
				</template>
				<el-table-column label="审核内容" prop="title" min-width="240"></el-table-column>
				<el-table-column label="文件类型" prop="suffix" min-width="80" align="center" />
				<el-table-column label="节点名称" prop="nodeName" min-width="120"></el-table-column>
				<el-table-column label="创建人" prop="createName" min-width="120"></el-table-column>
				<el-table-column label="创建时间" prop="createTime" min-width="160"></el-table-column>
				<el-table-column label="操作" :width="columnWidth">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleLookData(row)">预览</el-button>
						<el-button size="medium" type="text" @click="handleLookDetail(row)">详情</el-button>
						<template v-if="!row.approverStatus">
							<el-button size="medium" type="text" @click="handleAuditData(row)">审核</el-button>
						</template>
						<el-button size="medium" type="text" @click="handleLookFlow(row)">审核流程</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template slot="page" v-if="dataCount > 0">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
		</sw-common-frame>
		<flowinfo-drawer v-model="formDialog" :business-key="businessKey"></flowinfo-drawer>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import flowinfoDrawer from './flowinfo';
import listMixins from '@/mixins/listMixins';
import { getAuditedTaskList, getUnauditTaskList } from '@/api/approval/flowApi';
export default {
	mixins: [listMixins],
	components: { flowinfoDrawer },
	data() {
		return {
			activeName: '1',
			businessKey: ''
		};
	},
	computed: {
		...mapGetters(['userInfo']),
		listFunction() {
			if (this.activeName === '1') {
				return eval(getUnauditTaskList);
			} else if (this.activeName === '2') {
				return eval(getAuditedTaskList);
			}
		},
		requestParams() {
			let params = { ...this.queryData };
			params['flowType'] = '1';
			params['approverId'] = this.userInfo.id;
			return params;
		},
		taskPageList() {
			return this.tableData.map((item) => {
				let obj = { ...item };
				if (!item.busData.extFiled) {
					obj['resId'] = item.busData.id;
					obj['title'] = item.busData.oldName;
					obj['suffix'] = item.busData.attrSuffixStr;
					obj['createName'] = item.busData.createName;
				} else if (!!this.$isJSON(item.busData.extFiled)) {
					let resData = JSON.parse(item.busData.extFiled);
					obj['resId'] = resData.id;
					obj['title'] = resData.oldName;
					obj['suffix'] = resData.attrSuffixStr;
					obj['createName'] = resData.createName;
				}
				return obj;
			});
		},
		columnWidth() {
			if (this.activeName === '1') {
				return '200';
			} else if (this.activeName === '2') {
				return '160';
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryData.page = 1;
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//审核状态
		returnAuditStatus(data) {
			let text = '';
			let attrs = { size: 'medium', disableTransitions: true };
			if (data.approverStatus === '2') {
				text = '同意';
				attrs['type'] = 'success';
			} else if (data.approverStatus === '3') {
				text = '驳回';
				attrs['type'] = 'danger';
			}
			return this.$createElement('ElTag', { attrs }, text);
		},

		//预览资源
		handleLookData(data) {
			this.$router.push({ path: `/data/resource/${data.resId}` });
		},

		//查看详情
		handleLookDetail(data) {},

		//审核按钮
		handleAuditData(data) {},

		//查看审核流程
		handleLookFlow(data) {
			this.formDialog = true;
			this.businessKey = data.businessKey;
		}
	}
};
</script>
